<template>
  <div class="app-container">
    <el-table v-loading="listLoading" :data="applyList" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column label="姓名" align="center">
        <template slot-scope="scope">
          {{ scope.row.uname }}
        </template>
      </el-table-column>
      <el-table-column label="班级" align="center" width="150">
        <template slot-scope="scope">
          {{ scope.row.className }}
        </template>
      </el-table-column>
      <el-table-column label="学院" align="center" width="200">
        <template slot-scope="scope">
          {{ scope.row.collegeName }}
        </template>
      </el-table-column>
      <el-table-column label="加分绩点" align="center" width="150">
        <template slot-scope="scope">
          {{ scope.row.stuAddGpa }}
        </template>
      </el-table-column>
      <el-table-column label="年份" align="center" width="100">
        <template slot-scope="scope">
          {{ scope.row.year }}
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 1">待审核</el-tag>
          <el-tag type="success" v-else-if="scope.row.status == 2">通过</el-tag>
          <el-tag type="danger" v-else>拒绝</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="300">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleAdd(scope.row.plusesList)">加分项</el-button>
          <el-button type="success" size="mini" @click="op(scope.row.applyId, 2)"
            :disabled="scope.row.status != 1">通过</el-button>
          <el-button size="mini" type="danger" @click="op(scope.row.applyId, 3)"
            :disabled="scope.row.status != 1">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination background layout="prev, pager, next" :total="requestParams.total" @current-change="change"
        :page-size="requestParams.pageSize">
      </el-pagination>
    </div>
    <el-dialog title="加分项" :visible.sync="dialogVisible" width="40%">
      <el-table :data="showAddData" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column label="证书" align="center">
          <template slot-scope="scope">
            <el-image :src="scope.row.imageUrl" style="width: 100px;" :preview-src-list="[scope.row.imageUrl]"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="等级" align="center">
          <template slot-scope="scope">
            {{ scope.row.grade }}
          </template>
        </el-table-column>
        <el-table-column label="加分绩点" align="center" width="150">
          <template slot-scope="scope">
            {{ scope.row.gpa }}
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getApplyList, examineApply } from '@/api/apply'

export default {
  data() {
    return {
      requestParams: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      applyList: null,
      listLoading: false,
      showAddData: [],
      dialogVisible: false
    };
  },
  methods: {
    submitForm() {
      this.$refs.applicationForm.validate((valid) => {
        if (valid) {
          // 在这里处理表单提交逻辑，例如发送请求到后端API
          console.log('提交的申请数据:', this.applicationData);
          // 实际应用中需要替换为API调用
          // this.submitApplication(this.applicationData);
        } else {
          console.log('表单验证失败');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.applicationForm.resetFields();
    },
    getInfo() {
      this.listLoading = true;
      getApplyList(this.requestParams).then(response => {
        this.applyList = response.data.list;
        this.requestParams.total = response.data.total;
        this.listLoading = false;
      })
    },
    change(page) {
      this.requestParams.pageNo = page;
      this.getInfo();
    },
    handleAdd(item) {
      this.showAddData = item;
      this.dialogVisible = true;
    },
    op(id, status) {
      this.listLoading = true;
      examineApply({ id: id, status: status }).then(response => {
        this.listLoading = false;
        this.$message.success(response.data);
        this.getInfo();
      })

    }
  },
  mounted() {
    this.getInfo();
  },
};
</script>

<style scoped>
.page {
  margin-top: 15px;
  text-align: center;
}
</style>
